import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:intl/intl.dart';
import 'package:kxy_flutter_app/model/exam.dart';
import 'package:kxy_flutter_app/view/examination/do_exam_view.dart';
import 'package:kxy_flutter_app/view/root/view_model/navigation_model.dart';
import 'package:provider/provider.dart';

class HomeExamWidget extends StatelessWidget {
  final List<Exam> examList;

  const HomeExamWidget({
    Key key,
    @required this.examList,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var header = Container(
      alignment: Alignment.centerLeft,
      margin: EdgeInsets.only(top: 15),
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            '最新考试',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          moreBtn(context),
        ],
      ),
    );
    var listview = Container(
      height: 170,
      margin: EdgeInsets.only(top: 10),
      child: ListView(
        scrollDirection: Axis.horizontal,
        padding: EdgeInsets.symmetric(horizontal: 5),
        children: examList.map((e) {
          return examItemWidget(e, context);
        }).toList(),
      ),
    );
    return Column(children: [header, listview]);
  }

  Widget moreBtn(BuildContext context) {
    return GestureDetector(
      child: Row(children: [
        Text(
          '查看更多',
          style: TextStyle(
            fontSize: 16,
            color: Colors.black54,
          ),
        ),
        Icon(
          Icons.chevron_right,
          size: 20,
          color: Colors.black54,
        ),
      ]),
      onTap: () {
        var navModel = Provider.of<NavigationModel>(context, listen: false);
        navModel.changeSelectIndex(2);
      },
    );
  }

  Widget examItemWidget(Exam exam, BuildContext context) {
    return Container(
      width: 160,
      height: 160,
      margin: EdgeInsets.symmetric(horizontal: 5),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(7),
        boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(240, 240, 240, 1),
            offset: Offset(1, 1),
          ),
          BoxShadow(
            color: Color.fromRGBO(240, 240, 240, 1),
            offset: Offset(-1, -1),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          examStatusWidget(exam),
          titleWidget(exam.name),
          dateRangeWidget(exam.startTime, exam.endTime),
          Container(
            padding: EdgeInsets.only(bottom: 10),
            alignment: Alignment.bottomCenter,
            child: examBtn(exam, context),
          ),
        ],
      ),
    );
  }

  Widget examStatusWidget(Exam exam) {
    Color color;
    String text;
    if (exam.status == ExamStatus.NotStarted) {
      color = Color.fromRGBO(250, 181, 77, 1);
      text = '未开始';
    } else if (exam.status == ExamStatus.Started) {
      color = Color.fromRGBO(102, 211, 159, 1);
      text = '进行中';
    } else if (exam.status == ExamStatus.Ended) {
      color = Color.fromRGBO(136, 136, 136, 1);
      text = '已结束';
    } else {
      color = Colors.transparent;
      text = '';
    }

    return Container(
      height: 18,
      width: 56,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(5),
          bottomRight: Radius.circular(12),
        ),
      ),
      child: Text(
        text,
        style: TextStyle(
          fontSize: 12,
          color: Colors.white,
        ),
      ),
    );
  }

  Widget titleWidget(String title) {
    return Container(
      margin: EdgeInsets.only(top: 10),
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Text(
        title,
        style: TextStyle(
          color: Colors.black87,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
      ),
    );
  }

  Widget dateRangeWidget(DateTime start, DateTime end) {
    var format = new DateFormat('yyyy/MM/dd HH:mm');
    var style = TextStyle(
      fontSize: 11,
      color: Colors.black54,
    );
    return Container(
      height: 32,
      padding: EdgeInsets.symmetric(horizontal: 10),
      margin: EdgeInsets.only(top: 10),
      child: Row(
        children: [
          Padding(
            padding: EdgeInsets.only(right: 10),
            child: Text('至', style: style),
          ),
          Column(
            children: [
              Text(format.format(start), style: style),
              Text(format.format(end), style: style),
            ],
          ),
        ],
      ),
    );
  }

  Widget examBtn(Exam exam, BuildContext context) {
    var textStyle = TextStyle(fontSize: 12, color: Colors.white);
    return Container(
      alignment: Alignment.center,
      height: 28,
      margin: EdgeInsets.only(top: 10),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: FlatButton(
          padding: EdgeInsets.symmetric(horizontal: 15),
          color: Theme.of(context).primaryColor,
          onPressed: () => gotoExam(exam, context),
          child: Text('进入考试', style: textStyle),
        ),
      ),
    );
  }

  Future gotoExam(Exam exam, BuildContext context) async {
    if (exam.status == ExamStatus.NotStarted) {
      Fluttertoast.showToast(msg: '考试未开始');
      return;
    }
    if (exam.status == ExamStatus.Ended) {
      Fluttertoast.showToast(msg: '考试已结束');
      return;
    }
    var confirm = await confirmExam(context);
    if (!confirm) return;
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (cxt) => DoExamView(exam: exam),
      ),
    );
  }

  Future<bool> confirmExam(BuildContext context) async {
    return showDialog(
      context: context,
      builder: (cxt) {
        return AlertDialog(title: Text('提示'), content: Text('您确认进入本场考试吗？'), actions: [
          FlatButton(
            child: Text('取消'),
            onPressed: () {
              Navigator.pop(context, false);
            },
          ),
          FlatButton(
            child: Text('确认'),
            onPressed: () {
              Navigator.pop(context, true);
            },
          ),
        ]);
      },
    );
  }
}
